// ----------------------------- 获取分类，渲染到页面中 ---------------------------
// 直接封装成函数，目的是，添加完成、删除完成、修改完之后，还要调用这个函数来重新渲染页面
// render -- 渲染
// category -- 类别
// ------------------------  获取类别列表，渲染到页面中 ---------------------// - category -- 类别
function renderCategory() {
    // 发送ajax请求，获取数据，注意请求头(Authorization）
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
            // console.log(res);
            if (res.status === 0) {
                // 使用模板引擎渲染
                let arr = [];
                res.data.forEach(item => {
                    arr.push(`<tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
            <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
            <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
            </tr>`);
                })
                $('tbody').html(arr.join(''))
            }
        }
    });
}

renderCategory();
// ------------------------  删除分类 -----------------------
$('tbody').on('click', 'button:contains("删除")', function () {
    // 获取id
    let id = $(this).data('id');

    // 询问是否要删除
    layer.confirm('你是否要删除吗？', function (index) {
        // do something

        // 点击确定，这个函数触发了
        // console.log(id);
        // 发送ajax请求进行删除操作
        $.ajax({
            url: '/my/category/delete',
            data: {
                id: id
            },
            success: function (res) {

                // 删除成功，重新渲染页面
                if (res.status === 0) {
                    layer.msg(res.message);
                    renderCategory();
                }
            }
        });
        // 关闭弹层
        layer.close(index);
    });
});
// 声明一个变量，让它表示弹层；后面关闭弹层时会用到它。
var addIndex;
// 一、点击添加分类，实现弹层
$('button:contains("添加类别")').click(function () {
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(), // 内容在HTML中
        area: ['500px', '250px']
    });
});
// 二、提交表单数据，完成添加
// 注册表单的submit事件
$('body').on('submit', '#add-form', function (e) {
    e.preventDefault();
    // 规律：如果没有图片上传，一般都不使用FormData。
    // 具体：还得看接口要求
    var data = $(this).serialize(); // 一定要检查input是否有正确的name属性
    // ajax提交数据，完成添加
    $.ajax({
        type: 'POST',
        url: '/my/category/add',
        data: data,
        success: function (res) {

            // 添加成功
            if (res.status === 0) {
                layer.msg(res.message);
                renderCategory();
                // 关闭弹层
                layer.close(addIndex);
            }
        }
    });
});
// ----------------------- 编辑 （点击 编辑，显示弹层） -----
$('body').on('click', 'button:contains("编辑")', function () {
    // 获取事件源上的 三个 data-xxx 属性值
    var shuju = $(this).data();
    // console.log(shuju); // { name: 'xx', alias: 'xx', id: 2 }
    // editIndex 表示当前的弹层；关闭弹层的时候，需要用到它
    editIndex = layer.open({
        type: 1,
        title: '编辑分类',
        content: $('#tpl-edit').html(),
        area: ['500px', '250px'],
        // 弹层弹出后的回调，不要和ajax中的success弄混了
        success: function () {
            // 数据回填(不要忘记id)
            $('#edit-form input[name="name"]').val(shuju.name);
            $('#edit-form input[name="alias"]').val(shuju.alias);
            $('#edit-form input[name="id"]').val(shuju.id);
            /*************  也可以使用 layui 的 form.val()方法哦  ************/
        }
    });
});
// ----------------------- 编辑 （点击 确认修改，完成编辑） -----
$('body').on('submit', '#edit-form', function (e) {
    e.preventDefault();
    // 收集表单各项值
    var data = $(this).serializeArray();
    // ajax提交，完成修改
    $.ajax({
        type: 'POST',
        data: data,
        url: '/my/category/update',
        success: function (res) {

            if (res.status === 0) {
                layer.msg(res.message);
                renderCategory();
                layer.close(editIndex);
            }
        }
    });
})